import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:vape_xe/utils/utils.dart';
import 'package:vape_xe/widgets/widgets.dart';

import 'logic.dart';

class UpgradeView extends GetView<UpgradeController> {
  const UpgradeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new_rounded),
          onPressed: () => Get.back(),
        ),
        title: Text('Upgrade'.tr),
      ),
      body: Obx(
        () => controller.showProgress.value
            ? const Center(child: CircularProgressIndicator())
            : Stack(
                children: [
                  /// 烟杆
                  Positioned(
                    top: 60.h,
                    left: MediaQuery.of(context).size.width / 2 - 150.w,
                    child: netImageCached(
                      controller.upgradeData['icon'],
                      width: 300.w,
                      height: 377.w,
                      showProgress: false,
                      showError: false,
                    ),
                  ),

                  Positioned(
                      bottom: 16.h,
                      left: 0,
                      right: 0,
                      child: Column(
                        children: [
                          Container(
                            height: 30.h,
                            margin: EdgeInsets.symmetric(horizontal: 16.w),
                            decoration: BoxDecoration(borderRadius: 100.radius, color: Colors.white10),
                            child: Center(
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Text('Profit per hour'.tr),
                                  16.vGap,
                                  Image.asset(
                                    'assets/images/ic_paopao.webp',
                                    width: 14.w,
                                    height: 14.w,
                                  ),
                                  4.vGap,
                                  Text(
                                    '+${controller.upgradeData['nowCoin']}',
                                    style: TextStyle(
                                      fontSize: 16.sp,
                                      fontWeight: FontWeight.bold,
                                      fontFamily: 'Montserrat',
                                      color: Colors.white,
                                    ),
                                  ),
                                  4.vGap,
                                  Text(
                                    '+${controller.upgradeData['targetCoin']}',
                                    style: TextStyle(
                                      fontSize: 16.sp,
                                      fontWeight: FontWeight.bold,
                                      fontFamily: 'Montserrat',
                                      foreground: Paint()
                                        ..shader = const LinearGradient(
                                          colors: <Color>[Color(0xffF5B946), Color(0xffF58546)],
                                        ).createShader(
                                          const Rect.fromLTWH(0.0, 0.0, 150.0, 0.0),
                                        ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                          20.hGap,
                          Container(
                            width: 240.w,
                            height: 32.h,
                            decoration: const BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage('assets/images/bg_lv.webp'), // 确保你的图片放在assets文件夹下
                                fit: BoxFit.cover, // 图片填充方式，这里选择覆盖整个Container
                              ),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Text(
                                  'Lv.${controller.upgradeData['level']}',
                                  style: const TextStyle(fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                                ),
                                20.vGap,
                                Text(
                                  'Lv.${controller.upgradeData['level'] + 1}',
                                  style: const TextStyle(fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                                )
                              ],
                            ),
                          ),
                          28.hGap,
                          Container(
                            width: 98.w,
                            height: 84.h,
                            decoration: BoxDecoration(
                              color: Colors.white10,
                              borderRadius: 12.radius,
                              border: Border.all(color: Colors.white10, width: 2.w),
                            ),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Image.asset(
                                  'assets/images/ic_paopao.webp',
                                  width: 36.w,
                                  height: 36.w,
                                ),
                                8.hGap,
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Text(
                                      '${controller.upgradeData['userNum']}'.removeZero(),
                                      style: TextStyle(
                                        fontSize: 12.sp,
                                        color: controller.upgradeData['userNum'] < controller.upgradeData['targetNum']
                                            ? Colors.red
                                            : Colors.white,
                                      ),
                                    ),
                                    Text(
                                      '/${controller.upgradeData['targetNum']}'.removeZero(),
                                      style: TextStyle(fontSize: 12.sp),
                                    )
                                  ],
                                ),
                              ],
                            ),
                          ),
                          38.hGap,
                          GestureDetector(
                            onTap: () => controller.upgrade(),
                            child: Container(
                              height: 52.h,
                              margin: EdgeInsets.symmetric(horizontal: 16.w),
                              decoration: controller.upgradeData['userNum'] < controller.upgradeData['targetNum']
                                  ? BoxDecoration(borderRadius: 16.radius, color: Colors.white10)
                                  : BoxDecoration(
                                      gradient: const LinearGradient(colors: [Color(0xff6EDEF7), Color(0xff3351EF)]),
                                      borderRadius: 16.radius,
                                    ),
                              child: Center(
                                child: Text(
                                  'Upgrade'.tr,
                                  style: const TextStyle(fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                                ),
                              ),
                            ),
                          ),
                          16.hGap,
                        ],
                      )),
                ],
              ),
      ),
    );
  }
}
